
import React from 'react';
import './login.styl'
import { Form, Input, Button, Checkbox, message,Spin } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import axios from 'axios';

class Login extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            logining:0,
            values:{}
        }
    }
    onFinish(values) {
        this.setState({
            logining:1,
            values:values
        });
        setTimeout(() => {
            this.loginRes({
                status:'success',
                message:'登陆成功！'
            });
        },2000);
    }
    loginRes(res) {
        this.setState({
            logining:0
        });
        const {username,remember} = this.state.values;
        if(res.status === 'success') {
            message.success(res.message,.8);
            setTimeout(() => {
                if(remember) {
                    localStorage.setItem('user',JSON.stringify({username}));
                } else {
                    sessionStorage.setItem('user',JSON.stringify({username}));
                }
                this.props.history.push('/admin');
            },1000);
        } else {
            message.warn(res.message);
        }
    }
    render() {
        return (
            <div className="login">
                {
                    this.state.logining ? (<Spin className="spin" tip="登陆中..." />):''
                }
                <div className="login-box">
                    <h3>小米商城管理系统</h3>
                    <Form
                    name="normal_login"
                    className="login-form"
                    initialValues={{ remember: true }}
                    onFinish={this.onFinish.bind(this)}
                    >
                    <Form.Item
                        name="username"
                        rules={[
                        {
                            required: true,
                            message: '请输入账号!',
                        },
                        ]}
                    >
                        <Input size="large" prefix={<UserOutlined className="site-form-item-icon" style={{color:'#aaa'}} />} placeholder="账号 guest" />
                    </Form.Item>
                    <Form.Item
                        name="password"
                        rules={[
                        {
                            required: true,
                            message: '请输入密码!',
                        },
                        ]}
                    >
                        <Input
                        size="large"
                        prefix={<LockOutlined className="site-form-item-icon" style={{color:'#aaa'}} />}
                        type="password"
                        placeholder="密码 guest"
                        />
                    </Form.Item>
                    <Form.Item>
                        <Form.Item name="remember" valuePropName="checked" noStyle>
                            <Checkbox>记住我</Checkbox>
                        </Form.Item>
                    </Form.Item>
            
                    <Form.Item>
                        <Button type="primary" htmlType="submit" className="login-form-button" block>
                            登陆
                        </Button>
                    </Form.Item>
            
                    <Form.Item>
                        <a className="login-form-forgot" href="">
                        忘记密码 ？
                        </a>
                    </Form.Item>
            
                    </Form>
                </div>
            </div>
          );
    }
}

export default Login;